<!DOCTYPE html>
<html>
<head>
	<title>mixins</title>
	<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
	<h1>mixins</h1>
	<hr />
	<div id="app">
		{{ num }}
		<br>
		<button @click="add">add</button>
	</div>
	<script type="text/javascript">
		// 执行顺序： 全局-> mixins->原生
		
		// 这里必须卸载实例方法之前，否则不会执行
		Vue.mixin({
			updated: function() {
				// console.log(this === vue); // true
				console.log('全局的mixin', this.num);
			}
		});
		var vue = new Vue({
			el: '#app',
			data: {
				num: 1
			},
			methods: {
				add: function () {
					this.num += 1;
				}
			},
			updated: function() {
				// 这里的原生的钩子方法会在混入的钩子方法‘之后’执行
				console.log('原生钩子方法', this.num);
			},
			mixins: [{
				// 使用vue的生命周期钩子去实现'混入'的方法
				updated: function() {
					console.log('在控制台打印信息', this.num);
				}
			}]
		});
	</script>
</body>
</html>